<template>
  <div>
    <div>
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="发送者ID">
          <el-input
            v-model="formSearch.from_id"
            placeholder="请输入发送者ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="接收者ID">
          <el-input
            v-model="formSearch.to_id"
            placeholder="请输入接收者ID"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick">查询</el-button>
          <el-button type="danger" @click="clearClick">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        class="online"
      >
        <el-table-column prop="id" label="ID" sortable width="80px">
        </el-table-column>
        <el-table-column prop="from_id" label="发送者ID" width="120px">
        </el-table-column>
        <el-table-column prop="fromName" label="发送者" width="180px">
          <template slot-scope="scope">
            <el-avatar :src="baseURL + scope.row.frompic"></el-avatar>
            {{ scope.row.fromName }}
          </template>
        </el-table-column>

        <el-table-column prop="to_id" label="接收者ID" width="120px">
        </el-table-column>
        <el-table-column prop="toName" label="接收者" width="180px">
          <template slot-scope="scope">
            <el-avatar :src="baseURL + scope.row.topic"></el-avatar>
            {{ scope.row.toName }}
          </template>
        </el-table-column>

        <el-table-column prop="content" label="内容"> </el-table-column>

        <el-table-column prop="isread" label="状态" sortable width="100px">
          <template slot-scope="scope">
            <StateCircle :state="scope.row.isread == 0"></StateCircle>
            {{ scope.row.isread == 0 ? "未读" : "已读" }}
          </template>
        </el-table-column>
        <el-table-column prop="ctype" label="类型" sortable width="100px">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.ctype == 0"
              type="primary"
              disable-transitions
              >文本</el-tag
            >
            <el-tag
              v-if="scope.row.ctype == 1"
              type="success"
              disable-transitions
              >语音</el-tag
            >
            <el-tag
              v-if="scope.row.ctype == 2"
              type="danger"
              disable-transitions
              >图片</el-tag
            >
            <el-tag
              v-if="scope.row.ctype == 3"
              type="warning"
              disable-transitions
              >视频</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          sortable
          label="发送时间"
          width="180px"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button type="danger" plain @click="deleteClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pagenum"
        @current-change="getlinkList"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getlinkList, deleChat } from "@/request";
import StateCircle from "@/components/StateCircle";
import { mapState } from "vuex";
export default {
  name: "OnLink",
  data() {
    return {
      headers: {
        // 请求头部参数
        Authorization: this.$store.state.token.tokenn,
      },
      tableData: [],
      params: {},
      updateForm: {},
      dialogFormVisible: false,
      formSearch: {
        to_id: null,
        from_id: null,
      },
      pagenum: 1,
      total: 100,
    };
  },
  computed: {
    ...mapState(["token"]),
  },
  components: {
    StateCircle,
  },
  created() {
    this.getlinkList();
  },
  methods: {
    async getlinkList() {
      this.formSearch["pagenum"] = this.pagenum;
      let data = await getlinkList(this.formSearch);
      if (data.code != 200) return this.$message.error(data.msg);
      this.tableData = data.data.list;
      this.total = data.data.total;
    },
    searchClick() {
      this.init();
      this.getlinkList();
    },
    init() {
      this.pagenum = 1;
      this.total = 100;
    },
    clearClick() {
      this.formSearch = {
        to_id: null,
        from_id: null,
      };
      this.init();
      this.getlinkList();
    },

    deleteClick(id) {
      this.$confirm("您将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = await deleChat({ id });
          if (data.code != 200) return this.$message.error(data.message);
          this.$message.success("删除成功!");
          this.searchClick();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.user-table-expand {
  font-size: 0;
  margin: 10px 60px;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.user-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.user-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

.online .cell {
  display: flex;
  align-items: center;
}

.online .cell .el-avatar {
  margin-right: 5px;
}
</style>
